<template>
  <div class="chain-container buyOffer-container">
          <div class="banner h-banner">
            <!-- <img src="./../../../static/img/chain/cg.jpg"> -->
              </div>
          <div class="invite-1200">
              <a-form layout="inline" :form="form">
                  <a-form-item label='货品类型：' :span='10' class="select-buyoffer" style=" height: 40px">
                          <a-select placeholder="全部" :defaultValue="type" v-model="type" style="width: 190px;height:40px;" >
                            <a-select-option value="">全部</a-select-option>
                            <a-select-option v-for="(item,index) in highwayList" :key="index" :value="item.dictKey">{{item.dictValue}}</a-select-option>
                        </a-select>
                  </a-form-item>
                  <a-form-item label='关键字：'>
                          <a-input placeholder="请输入关键字" style='width:190px;' v-model="name" ></a-input>
                  </a-form-item>
                  <a-form-item>
                          <a-button class='ant-btn-primary' type="primary" @click="buyOfferList">搜索</a-button>
                  </a-form-item>
                  <a-form-item>
                          <a-button @click="react">重置</a-button>
                  </a-form-item>
              <!--     <a-form-item style='margin-right:0; float:right;'>
                          <a-button class='ant-btn-danger ' type="danger">发布求购信息</a-button>
                  </a-form-item> -->
              </a-form>
               <!-- 数据展示 -->
              <div class="tender-title">
                    <span></span>
                    <h2>求购信息</h2>
              </div>
              <div class="tender-line"></div>
              <div class="buy-goods-list  wy-m-t-20">
                    <div class="tender-list-title">
                        <ul>
                              <li>货品信息</li>
                              <li>采购商</li>
                              <li>发布时间</li>
                              <li>查看</li>
                        </ul>
                    </div>
                   <!-- 数据列表 -->
                    <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="purchList" >
                          <a-list-item slot="renderItem" slot-scope="item, index" key="item.title" class="list-width" style="height: 140px;">
                                <div class="invite-box-conent">
                                      <!-- <div class="goods-pic">
                                            <img v-lazy="item.imgUrl">
                                      </div> -->
                                      <div class="goods-name"  style="margin-top: 18px">
                                            <h4>{{item.subject}}</h4>
                                            <div>
                                                  <p>货品名称：<span>{{item.name}}</span></p>
                                                  <p>货品类型：<span>{{item.typeValue}}</span></p>
                                                  <p>求购说明：<span>{{item.description}}</span></p>
                                            </div>
                                      </div>
                                </div>
                                <div class="invite-box-conent"  style="margin-top: 34px">
                                      <h4> {{item.company}}</h4>
                                      <div class="useStar">
                                            <span>用户星级</span>
                                            <a-rate :defaultValue="2.5" disabled allowHalf />
                                            <div class="attestaion">已认证</div>
                                      </div>
                                </div>
                                <div class="invite-box-conent">
                                        <p>{{item.createTime?item.createTime.split(' ')[0]:''}}</p>
                                </div>
                                <div class="invite-box-conent"   >
                                      <a-button v-if="loggedIn" class='ant-btn-primary goods-sell' type="primary" @click="elasticShowModal(item.userId)">立即沟通</a-button>
                                      <router-link v-if="!loggedIn" to="/login"><a-button  class='ant-btn-primary goods-sell' type="primary">立即沟通</a-button></router-link>
                                      <nuxt-link :to="`/chain/buyOffer/${item.greenFoodPurchaseId}`">
                                          <a-button class='goods-detail'>查看详情</a-button>
                                      </nuxt-link>
                            </div>
                          </a-list-item>
                    </a-list>
              </div>
          </div>
       <!-- 弹框 -->
      <Elastic :userId="userId" ref='elastic'></Elastic>
  </div>
</template>

<script>
// import { chainData } from './../../../utils/chainData'
import Elastic from './../../../components/dialog/Elastic'
import AuthMixin from '~/mixins/auth'
import { environment } from '@/server/environment'
export default {
    mixins: [ AuthMixin ],
    components: {
     Elastic,
    },
  data () {
    return {
      userId: '',
      name:'',
      type: '',
      purchList: [],
      highwayList: [],
      data:[],
      pagination: {
          pageSizeOptions: ['10', '20', '30', '40', '100'],
          defaultCurrent: 1,
          defaultPageSize: 10,
          showSizeChanger: true,
          total:10,
          showTotal: (total, range) => `共 ${total} 条记录`
        },
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },

  created :function(){
    const _type = this.$route.query.type;
    if ( _type ) this.type = parseInt(_type);
    this.infoCommonDict(29)
    this.buyOfferList()
  },
   methods:{
          // 字典表接口 
      async infoCommonDict (type) {
          const res = await this.$store.dispatch('infoCommonDict',{
            dictType: type,
            pageSize: 99,
            pageNum: 1
          })
          if (res.status) {
            switch(type){
              case 29: this.highwayList = res.data.rows; break;
            }
          } 
      },
      //重置
      react (){
        this.type = '' //货品类型
        this.name = '' //货品名称关键字
        this.buyOfferList()

      },
      //查询 获取供应信息
      async buyOfferList () {
        
        const res = await this.$store.dispatch('info/buyOfferList',{
          pageSize: this.pagination.defaultPageSize,
          pageNum: this.pagination.defaultCurrent,
          name:this.name,
          type:this.type


        })
        if(res.status){
          this.purchList = res.data.rows
          this.pagination.total = res.data.total
          console.log(this.purchList,1111111)
        }else{
          this.purchList = [];
          this.pagination.total = 0
        }
        
      
    },
    elasticShowModal(id){
        this.userId = id
        this.$refs.elastic.showModal(id);
    },
  }
}
</script>
<style lang="scss" scoped>
@import "./../../../assets/css/chain/sellOffer.scss";

.buyOffer-container{
    //求购列表
  .buy-goods-list{
     .tender-list-title{
        width:1200px;
        height:40px;
        background:#F7F7F7;
        border-bottom:1px solid #D8D8D8;
         ul{
            li{
                float:left;
                text-align:center;
                line-height:40px;
                font-size:16px;
                font-weight:400;
                color:#333333;
            }
            li:first-child{
               width:452px;
               border-right:1px solid #EFEFEF;
          }
           li:nth-child(2){
             width:389px;
             border-right:1px solid #EFEFEF;
          }
           li:nth-child(3){
             width:206px;
             border-right:1px solid #EFEFEF;
          }
           li:last-child{
             width:150px;
          }
         }
     }
    .invite-box-conent:first-child{
        width:452px;
    }
    .invite-box-conent:nth-child(2){
      width:389px;
      margin-top:24px;
    }
    .invite-box-conent:nth-child(3){
        width:206px;
      line-height:140px;
      padding-left:10px;
   }
   .invite-box-conent:nth-child(4){
     width:150px;
     line-height:0;
   }
   .goods-name {
    div{
      margin-top:6px !important;
    }
   }
  }
}
.wy-m-t-20{
  margin-bottom: 20px;
}
.h-banner{
  width: 100%;
  height: 500px;
  background: url('~static/img/chain/cg.jpg') center top / cover no-repeat;
}
.select-buyoffer{

   .ant-select-selection--single{
     height: 40px !important;
     line-height: 40px;
     .ant-select-selection__rendered{
       line-height: 40px !important;
     }
     .ant-select-selection-selected-value{
       line-height: 40px;
     }
   }
 
}

</style>